{%extends "base.html"%}
{%block title%}
基础信息设置 - 马克笔记
{%endblock title%}
{%block styles%}

<link rel="stylesheet" href="{{url_for("static", filename="dist/css/setting.min.css")}}">

{{super()}}
{%endblock styles%}

{%block content%}
   
<div class="main-dropdown">
    <div class="container">
        <div class="main-left">
            {%include "setting/_main-left.html"%}
        </div>
        <div class="main-center">
                <div class="setting-form">
                    <div class="setting-header">
                        <h3>基础信息</h3>
                    </div>
                    <form class="form-horizontal" method="post" role="form">
                        {{ form.hidden_tag() }}
                        <div class="setting-group">
                            {%for msg in get_flashed_messages()%}
                            {%if loop.first%}
                            <div class="alert alert-success alert-dismissible" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                {{msg.decode("utf-8")}}
                            </div>
                            {%endif%}
                            {%endfor%}
                            <div class="form-group">
                                <label class="col-sm-3 control-label">
                                    封面
                                </label>
                                <div class="col-sm-9">
                                    <div id="cover-setting" class="thumbnail cover-thumbnail fileinput-button">
                                        {%if current_user.cover%}
                                        <img src="{{url_for("static", filename = current_user.thumbnail_cover())}}" alt="封面">
                                        {%endif%}
                                        <input id="cover-input" type="file">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">头像</label>
                                <div class="col-sm-9">
                                    <div id="avatar-setting" class="thumbnail avatar-thumbnail fileinput-button">
                                        <img src="{{url_for("static", filename = current_user.thumbnail_avatar())}}" alt="头像">
                                        <input id="avatar-input" type="file">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="username">名称</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control {%if form.username.errors%}input-error{%endif%}" name="username" placeholder="用户名称" value="{{current_user.username}}">
                                    {%for error in form.username.errors%}
                                    <div class="input-error-info">{{error.decode("utf-8")}}</div>
                                    {%endfor%}
                                </div>
                            </div>
                            {%if not current_user.set_pathname%}
                            <div class="form-group">
                                <label class="col-sm-3 control-label" for="pathname">个性化域名</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control {%if form.pathname.errors%}input-error{%endif%}" name="pathname" placeholder="个性化域名" value="{{current_user.pathname}}">
                                    {%for error in form.pathname.errors%}
                                    <div class="input-error-info">{{error.decode("utf-8")}}</div>
                                    {%endfor%}
                                    <span class="help-block" style="color:#dc7745;">只能修改一次</span>
                                </div>
                            </div>
                            {%endif%}
                        </div>
                        <div class="setting-bottom">
                            <div class="form-group">
                                <div class="col-sm-offset-3 col-sm-9">
                                    <button type="submit" class="btn btn-default">保存更改</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
        </div>
    </div>
</div>

<div id="loading" class="loading-backdrop"><i class="fa fa-spinner fa-pulse fa-fw"></i></div>

<div id="avatar-setting-modal" class="modal fade avatar-setting-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">修改图片</h4>
            </div>
            <div class="modal-body">
                <div id="avatar-setting-preview">
                    
                    <div class="avatar-setting-preview">
                    </div>
                </div>
                <div class="image-setting-menu">
                <span class="fa fa-square-o left-icon"></span>
                <span class="fa fa-square-o right-icon"></span>
                <input id="avatar-zoom-input" type="range" class="image-zoom-input">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary ok">确定</button>
            </div>
        </div>
    </div>
</div>

<div id="cover-setting-modal" class="modal fade cover-setting-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">修改图片</h4>
            </div>
            <div class="modal-body">
                <div id="cover-setting-preview">
                    
                    <div class="cover-setting-preview">
                    </div>
                </div>
                <div class="image-setting-menu">
                <span class="fa fa-square-o left-icon"></span>
                <span class="fa fa-square-o right-icon"></span>
                <input id="cover-zoom-input" type="range" class="image-zoom-input">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary ok">确定</button>
            </div>
        </div>
    </div>
</div>
{%endblock content%}

{%block scripts%}

<script src="{{url_for("static", filename="dist/js/basic_setting.min.js")}}"></script>

{{super()}}
{%endblock scripts%}
  

